<template>
  <div class='home-page'>
    <Toptab :checkedNum="3"></Toptab>
    <div class="main">
      <div class="header">
        <!-- 输入语言设置 --------------------------------------------->
        <div class="item">{{input}}
          <i class="iconfont" v-if="inputChecked">&#xeb15;</i>
          <i class="iconfont" v-else @click.stop="inputChecked=true;outputChecked=false">&#xeb14;</i>
          <div class="input" v-show="inputChecked">
            <div class="inputson"
            :class="{act:inputCode==='zh'}"
            @click="changeInput('zh','中文')"
            >中文</div>
            <div class="inputson"
            :class="{act:inputCode==='en'}"
            @click="changeInput('en','英语')"
            >英语</div>
          </div>
        </div>
        <div class="checked"
        @click="Exchange()"
        ><i class="iconfont">&#xe606;</i>
        </div>
        <!-- 输出语言设置 --------------------------------------------->
        <div class="item">{{output}}
          <i class="iconfont" v-if="outputChecked">&#xeb15;</i>
          <i class="iconfont" v-else @click.stop="outputChecked=true;inputChecked=false">&#xeb14;</i>
          <div class="output" v-show="outputChecked">
            <div class="inputson"
            :class="{act:outputCode==='zh'}"
            @click="changeOutput('zh','中文')"
            >中文</div>
            <div class="inputson"
            :class="{act:outputCode==='en'}"
            @click="changeOutput('en','英语')"
            >英语</div>
          </div>
        </div>
      </div>
      <div class="cards">
        <div class="card1">
          <i class="iconfont clear" v-show="text1.length>0" @click="text1='',text2=''">&#xe622;</i>
          <textarea class="textarea input"
          placeholder="请输入要翻译的内容"
          v-model="text1"
          ></textarea>
          <div class="footer" v-show="text1.length>0">
            <div class="play" @click="playaudio(inputCode,text1)">
              <i class="iconfont">&#xe610;</i>
            </div>
            <div class="last">
              <span class="count">{{text1.length}}/300</span>
              <div class="translation"
              @click="text2=Translation(text1,model)"
              >翻译</div>
            </div>
          </div>
        </div>
        <div class="card2">
          <textarea class="textarea output"
          disabled
          v-model="text2"
          ></textarea>
          <div class="footer" v-if="text2!==''">
            <!-- 翻译 -->
            <div class="item" @click="playaudio(outputCode,text2)">
              <i class="iconfont">&#xe610;</i>
            </div>
            <!-- 一键复制 -->
            <div class="item copy-btn" :data-clipboard-text="text2">
              <i class="iconfont">&#xec7a;</i>
            </div>
            <!-- 点赞点踩 -->
            <!-- 认可的消息 -->
            <div class='pop' id='pop' v-if="pop1">
              {{liketext}}
              <div id='triangle' class='triangle-bottom'></div>
            </div>
            <!-- 不认可的消息 -->
            <div class='pop1' id='pop' v-if="pop2">
              {{unliketext}}
              <div id='triangle' class='triangle-bottom1'></div>
            </div>
            <!-- 不认可这个翻译 -->
            <div class="item like"
            @mouseenter="pop2 = true"
            @mouseleave="pop2 = false"
            @click="unagreed()"
            :class="{act:like===false,noact:like===true}">
              <i class="iconfont">&#xe7c9;</i>
            </div>
            <!-- 认可这个翻译 -->
            <div class="item like"
            @mouseenter="pop1 = true"
            @mouseleave="pop1 = false"
            @click="agreed()"
            :class="{act:like===true,noact:like===false}">
              <i class="iconfont">&#xe7c8;</i>
            </div>
          </div>
        </div>
      </div>
      <!-- 历史记录 -->
      <div class="history">
        <div class="title">
          <i class="iconfont">&#xe623;</i>翻译历史<span>(只记录最近十条)</span>
          <div class="clear" v-if="historylist.length!==0"
          @click="clearHistory()"
          ><i class="iconfont">&#xe625;</i>清空历史记录</div>
        </div>
        <div class="historymain">
          <template v-if="historylist.length===0">
            <div class="none">
               暂无翻译记录<i class="iconfont">&#xe60b;</i>
            </div>
          </template>
          <template v-else>
            <div class="historyheader">
              <div class="headeritem">翻译文本</div>
              <div class="headeritem">翻译结果</div>
              <div class="headeritem">翻译模式</div>
              <div class="headeritem">时间</div>
            </div>
            <div class="historybody">
              <!-- 翻译条目 -->
              <div class="historyrecord"
              v-for="(item,key) in historylist"
              @click="Backtracking(key)"
              :key="key">
                <div class="recorditem">{{ item.sourceText }}</div>
                <div class="recorditem">{{item.targetText}}</div>
                <div class="recorditem">{{item.model}}</div>
                <div class="recorditem">{{day(item.date).locale('zh-cn').fromNow()}}</div>
                <!-- 清除按钮弹窗 -->
                <div class='popclear' id='pop' v-if="popclear===key">
                  清除这条翻译结果
                  <div id='triangle' class='triangle-bottom1'></div>
                </div>
                <i class="iconfont clear"
                @mouseenter="popclear = key"
                @mouseleave="popclear = 999"
                @click="clearItem(key)"
                >&#xe625;</i>
              </div>
            </div>
          </template>
        </div>
      </div>
    </div>

  </div>
</template>

<script>
import Toptab from '@/components/Toptab.vue'
import { Translation } from '@/utils/Translation'
// 导入第三方包实现一键复制
import Clipboard from 'clipboard'
// 导入封装的消息提示框
import popmessage from '@/components/library/message'
// 时间戳处理包
const dayjs = require('dayjs')
const relativeTime = require('dayjs/plugin/relativeTime')
dayjs.extend(relativeTime)
require('dayjs/locale/zh-cn')
export default {
  name: 'home-page',
  components: {
    Toptab
  },
  data () {
    return {
      res: '',
      text1: '',
      text2: '',
      // 省流专用定时器
      timer: null,
      // 输入 输出记录
      input: '中文',
      inputCode: 'zh',
      inputChecked: false,
      output: '英语',
      outputCode: 'en',
      outputChecked: false,
      // 点赞状态记录
      like: null,
      liketext: '认可这个翻译结果',
      unliketext: '不认可这个翻译结果',
      pop1: false,
      pop2: false,
      popclear: true,
      historylist: [],
      historyitem: {
        sourceText: '',
        targetText: '',
        model: '',
        date: '',
        // 翻译源语言及翻译目标语言的记录
        inputCode: '',
        outputCode: '',
        input: '',
        output: ''
      }
    }
  },
  methods: {
    changeInput (mode, text) {
      this.inputCode = mode
      this.input = text
    },
    changeOutput (mode, text) {
      this.outputCode = mode
      this.output = text
    },
    playaudio (kind, content) {
      const url = 'https://dict.youdao.com/dictvoice?audio=' + content + '&le=' + kind
      const audio = new Audio()
      audio.src = url
      audio.play()
    },
    agreed () {
      if (this.like === null) {
        this.like = true
        this.liketext = '已认可这个翻译结果'
        popmessage({ type: 'success', str: '认可这个翻译结果' })
      }
    },
    unagreed () {
      if (this.like === null) {
        this.like = false
        this.unliketext = '已不认可这个翻译结果'
        popmessage({ type: 'success', str: '感谢您的反馈' })
      }
    },
    initlike () {
      this.like = null
      this.liketext = '认可这个翻译结果'
      this.unliketext = '不认可这个翻译结果'
    },
    Exchange () {
      const code = this.inputCode
      this.inputCode = this.outputCode
      this.outputCode = code
      const text = this.text1
      this.text1 = this.text2
      this.text2 = text
      const put = this.input
      this.input = this.output
      this.output = put
    },
    // 清除历史记录
    clearHistory () {
      this.historylist = []
      this.$store.commit('history/setTranslation', this.historylist)
    },
    // 清除单条记录
    clearItem (key) {
      this.historylist.splice(key, 1)
      this.$store.commit('history/setTranslation', this.historylist)
    },
    // 回溯某条历史记录
    Backtracking (key) {
      this.text1 = this.historylist[key].sourceText
      this.text2 = this.historylist[key].targetText
      this.input = this.historylist[key].input
      this.inputCode = this.historylist[key].inputCode
      this.output = this.historylist[key].output
      this.outputCode = this.historylist[key].outputCode
    }
  },
  computed: {
    model () {
      return this.inputCode + '2' + this.outputCode
    }
  },
  watch: {
    text1 (newval, oldval) {
      this.initlike()
      if (this.inputCode === this.outputCode) {
        this.text2 = this.text1
      } else if (this.text1 === '') {
        this.text2 = ''
      } else {
        clearTimeout(this.timer)
        this.timer = setTimeout(async () => {
          this.text2 = await Translation(newval, this.model)
          this.historyitem.sourceText = this.text1
          this.historyitem.targetText = this.text2
          // 翻译模式 中文
          this.historyitem.model = this.input.charAt(0) + '译' + this.output.charAt(0)
          // 翻译源语言
          this.historyitem.input = this.input
          this.historyitem.inputCode = this.inputCode
          // 翻译目标语言
          this.historyitem.output = this.output
          this.historyitem.outputCode = this.outputCode
          this.historyitem.date = Date.now()
          if (this.historylist.length < 10) {
            this.historylist.unshift(JSON.parse(JSON.stringify(this.historyitem)))
            this.$store.commit('history/setTranslation', this.historylist)
          } else {
            this.historylist.pop()
            this.historylist.unshift(JSON.parse(JSON.stringify(this.historyitem)))
            this.$store.commit('history/setTranslation', this.historylist)
          }
        }, 2000)
      }
    }
  },
  created () {
    this.historylist = this.$store.state.history.Translation
  },
  mounted () {
  // 模拟外部点击
    document.addEventListener('click', (e) => {
      if (e.target.className !== 'dropdownMenu') {
        this.inputChecked = false
        this.outputChecked = false
      }
    })
    // 初始化Clipboard对象
    this.clipboard = new Clipboard('.copy-btn')

    // 添加点击事件监听器
    this.clipboard.on('success', () => {
    // 复制成功的处理逻辑
      popmessage({ type: 'success', str: '复制成功' })
    })

    this.clipboard.on('error', () => {
    // 复制失败的处理逻辑
      popmessage({ type: 'error', str: '复制失败' })
    })
  },
  // 在组件生命周期结束时销毁
  beforeUnmount () {
    window.removeEventListener('click', () => {}, true)
  }
}
</script>

<style scoped lang='less'>
.home-page{
  .main{
    width: 1200px;
    height: 1000px;
    background-color: #fff;
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    .header{
      height: 60px;
      width: 260px;
      margin-left: 40px;
      margin-bottom: 0px;
      display: flex;
      .checked{
        cursor: pointer;
        width: 20px;
        line-height: 70px;
        height: 60px;
        .iconfont{
          font-size: 20px;
        }
      }
      .item{
        position: relative;
        cursor: default;
        border-radius: 10px;
        border: 1px solid #b9b9b9;
        text-indent: 10px;
        height: 40px;
        line-height: 40px;
        width: 100px;
        background-color: #ffffff;
        margin-top: 15px;
        margin-left: 10px;
        margin-right: 10px;
        .iconfont{
          position: absolute;
          right: 10px;
          cursor: pointer;
        }
        .input{
          z-index: 3;
          position: absolute;
          top: 44px;
          left: 0px;
          width: 280px;
          height: 90px;
          border-radius: 0 10px 10px 10px;
          background-color: #fff;
          display: flex;
          flex-wrap: wrap;
          line-height: 30px;
          box-shadow: 5px 5px 5px 0px #666;
          .inputson{
            cursor: pointer;
            margin: 5px;
            text-indent: 0;
            height: 30px;
            line-height: 30px;
            width: 80px;
            text-align: center;
            &:hover{
              background-color: #bdc8cea1;
            }
          }
          .act{
            border-radius: 10px;
            color: #3e87e5;
          }
        }
        .output{
          z-index: 3;
          position: absolute;
          top: 44px;
          left: 0px;
          width: 280px;
          height: 90px;
          border-radius: 0 10px 10px 10px;
          background-color: #fff;
          display: flex;
          flex-wrap: wrap;
          line-height: 30px;
          box-shadow: 5px 5px 5px 0px #666;
          .inputson{
            cursor: pointer;
            margin: 5px;
            text-indent: 0;
            height: 30px;
            line-height: 30px;
            width: 80px;
            text-align: center;
            &:hover{
              background-color: #bdc8cea1;
            }
          }
          .act{
            border-radius: 10px;
            color: #3e87e5;
          }
        }
      }
    }

    .cards{
      display: flex;
      .textarea{
        resize: none;
        font-size: 16px;
        border: none;
        margin: 30px;
        height: 220px;
        width: 400px;
        outline: none;
        background-color: rgb(241, 247, 255);
      }
      .card1{
        position: relative;
        background-color: rgb(241, 247, 255);
        border-radius: 20px;
        margin-left: 40px;
        width: 500px;
        height: 300px;
        border: 1px solid #666;
        &:hover{
          border: 1px solid #3e87e5;
        }
        .clear{
          cursor: pointer;
          font-size: 24px;
          position: absolute;
          right: 20px;
          color: rgb(190, 206, 226);
          &:hover{
            color:rgb(192, 215, 245);
          }
        }
        .footer{
          position: absolute;
          left: 30px;
          bottom: 0;
          height: 40px;
          width: 440px;
          .play{
            float: left;
            cursor: pointer;
            margin: 5px;
            border-radius: 5px;
            width: 30px;
            height: 30px;
            line-height: 30px;
            text-align: center;
            background-color: #fff;
            &:hover{
              color: #3e87e5;
              background-color: #dcdcdc;
            }
          }
          .last{
            position: relative;
            margin: 5px;
            float: right;
            height: 30px;
            width: 200px;
            .count{
              margin-left: 80px;
              color: #666;
              line-height: 30px;
            }
            .translation{
              cursor: pointer;
              float: right;
              background-color: #3e87e5;
              border-radius: 5px;
              color: #fff;
              width: 60px;
              height: 30px;
              line-height: 30px;
              text-align: center;
              &:hover{
                background-color: #5993df;
              }
            }
          }
        }
      }
      .card2{
        position: relative;
        background-color: rgb(241, 247, 255);
        border-radius: 20px;
        margin-left: 40px;
        width: 500px;
        height: 300px;
        border: 1px solid #666;
        .footer{
          position: absolute;
          left: 30px;
          bottom: 0;
          height: 40px;
          width: 440px;
          .item{
            float: left;
            cursor: pointer;
            margin: 5px;
            border-radius: 5px;
            width: 30px;
            height: 30px;
            line-height: 30px;
            text-align: center;
            background-color: #fff;
            &:hover{
              color: #3e87e5;
              background-color: #dcdcdc;
            }
          }
          .like{
            float: right;

          }
          .act{
            cursor: default;
            color: #3e87e5;
            &:hover{
              color: #3e87e5;
              background-color: #fff;
            }
          }
          .noact{
            cursor: not-allowed;
            color: #666666a0;
            &:hover{
              color: #666666a0;
              background-color: #fff;
            }
          }
          .pop{
            width:80px;
            height:40px;
            border:2px solid grey;
            border-radius: 4px;
            box-shadow: 2px 2px 2px grey;
            position:absolute;
            background-color:white;
            font-size: 6px;
            position: absolute;
            right: 0;
            top: -48px;
          }
          .triangle-bottom{
            width:0;
            height:0;
            border-top:10px solid grey;
            border-left:10px dashed transparent;
            border-right:10px dashed transparent;
            position:absolute;
            right: 48px;
            top: 38px;
          }
          .pop1{
            width:80px;
            height:40px;
            border:2px solid grey;
            border-radius: 4px;
            box-shadow: 2px 2px 2px grey;
            position:absolute;
            background-color:white;
            font-size: 6px;
            position: absolute;
            right: -40px;
            top: -48px;
          }
          .triangle-bottom1{
            width:0;
            height:0;
            border-top:10px solid grey;
            border-left:10px dashed transparent;
            border-right:10px dashed transparent;
            position:absolute;
            right: 48px;
            top: 38px;
          }
        }
      }
    }
    .history{
      width: 1040px;
      height: 500px;
      margin-left: 40px;
      margin-top: 30px;
      .title{
        height: 50px;
        line-height: 50px;
        text-indent: 20px;
        font-size: 24px;
        color: #666;
        .iconfont{
          font-size: 24px;
          color: #666;
        }
        span{
          font-size: 12px;
        }
        .clear{
          cursor: pointer;
          float: right;
          font-size: small;
          font-family: '钉钉进步体';
          &:hover{
            color: #3e87e5;
            .iconfont{
              color: #3e87e5;
            }
          }
          .iconfont{
            font-size: 14px;
            &:hover{
              color: #3e87e5;
            }
          }
        }
      }
      .historymain{
        position: relative;
        border-radius: 20px;
        background-color: #ececec;
        height: 450px;
        width: 1040px;
        .none{
          position: absolute;
          left: 385px;
          top: 160px;
          font-family: '钉钉进步体';
          color: #666;
          font-size: 36px;
          .iconfont{
            font-size: 36px;
            font-weight: 900;
          }
        }

        .historyheader{
          height: 45px;
          line-height: 45px;
          margin: 0 auto;
          width: 1000px;
          display: flex;
          .headeritem{
            text-align: center;
            width: 200px;
            margin-right: 40px;
          }
        }
        .historybody{
          border-radius: 15px;
          height: 400px;
          margin: 0 auto;
          width: 1000px;
          overflow-y: auto;
          overflow: visible;
          .historyrecord{
            overflow: visible;
            position: relative;
            display: flex;
            height: 40px;
            border-bottom: 1px solid #666;
            .recorditem{
              cursor: pointer;
              white-space: nowrap;
              overflow: hidden;
              text-overflow: ellipsis;
              line-height: 40px;
              text-align: center;
              width: 200px;
              margin-right: 40px;
              color: #666;
            }
            .recorditem:last-child{
              border-right: none;
            }
            &:hover{
              .recorditem{
                color: #3e87e5;
              }
            }
            .clear{
              position: absolute;
              right: 30px;
              cursor: pointer;
              line-height: 40px;
              &:hover{
                color: #0054c1;
              }
            }
            //清除按钮提示框
            .popclear{
              z-index: 9;
              width:80px;
              height:40px;
              border:2px solid grey;
              border-radius: 4px;
              box-shadow: 2px 2px 2px grey;
              background-color:white;
              font-size: 6px;
              position: absolute;
              top: -40px;
              right: -15px;
            }
            .triangle-bottom1{
              width:0;
              height:0;
              border-top:10px solid grey;
              border-left:10px dashed transparent;
              border-right:10px dashed transparent;
              position:absolute;
              right: 48px;
              top: 38px;
            }
          }
        }
      }
    }
  }

}
</style>
